<template>
	<footer>
		<ul>
			<li :class="{active:changeindex==1}" @click="change('团购')">
				<router-link to="/index"><i class="iconfont icon-shouyetianchong"></i><p>团购</p></router-link>
			</li>
			<li :class="{active:changeindex==2}" @click="change('附近')">
				<router-link to="/nearby"><i class="iconfont icon-fujin"></i><p>附近</p></router-link>
			</li>
			<li :class="{active:changeindex==3}" @click="change('更多')">
				<router-link to="/more"><i class="iconfont icon-gengduo"></i><p>更多</p></router-link>
			</li>
			<li :class="{active:changeindex==4}" @click="change('我的')">
				<router-link to="/my"><i class="iconfont icon-yonghu"></i><p>我的</p></router-link>
			</li>
			<li :class="{active:changeindex==5}" @click="change('购物车')">
				<router-link to="/car"><i class="iconfont icon-gouwuche2"></i><p>购物车</p></router-link>
			</li>
		</ul>
	</footer>
</template>
<script>
	export default{
		name:"footer1",
		data(){
			return{

			}
		},
		methods:{
			change(str){
				this.$store.state.title=str;
			}
		},
		mounted(){
			this.isactive=this.$store.state.index;	
		},
		computed:{
			changeindex(){
				return this.$store.state.index;
			}
		}
	}
</script>
<style scoped>
	.active a{
		color: #3F51B5;
	}
	footer{
		width: 100%;
		background: #06c1ae;
		box-sizing: border-box;
		position: fixed;
		bottom: 0px;
		font-size: .34rem;
	}
	footer ul{
		overflow: hidden;
	}
	footer ul li{
		width: 20%;
		text-align: center;
		line-height: .5rem;
		float: left;
	}
	footer a{
		color: white;
		display:block;
	}
</style>